<template>
  <div class="chatToolsPane" @click="closeWxEmojisDialogShow">
    <!-- chatTools-工具-start -->
    <div class="chatTools">
      <!-- 表情包选择-组件-弹窗-start -->
      <wxEmojisDialog
        v-if="wxEmojisDialogShow"
        @wxEmojisClick="wxEmojisClick"
      ></wxEmojisDialog>
      <!-- 表情包选择-组件-弹窗-end -->

      <!-- 聊天操作-start -->
      <div class="chatOperation">
        <div class="toolBtn">
          <!-- 表情包按钮-start -->
          <span
            class="expressionBtn"
            @click.stop="wxEmojisDialogShow = true"
          >
            <!-- <svg-icon icon-class="expression" /> -->
            <img src="@/assets/images/emojisIco.png" />
          </span>
          <!-- 表情包按钮-end -->
        </div>
        <div class="chatTextareaDiv">
          <div
            contentEditable="true"
            contenteditable="plaintext-only"
            ref="chatTextarea"
            id="chatTextarea"
            class="chatTextarea"
            @keyup="handkeKeyUp"
            @keydown="handleKeyDown"
            @blur="chatTextareaClick"
          ></div>
          <div class="chatSubmitBtn">
            <el-button
              type="primary"
              size="small"
              @click="chatSubmit()"
              >发送</el-button
            >
          </div>
        </div>
      </div>
      <!-- 聊天操作-end -->
      <div class="chatSendSuccess" v-if="chatSendSuccess">
        发送消息： {{ chatSendSuccess }}
      </div>
    </div>
    <!-- chatTools-工具-end -->

    <!-- @成员弹窗-start -->
    <atDialog
      v-if="atDialogShow"
      :visible="atDialogShow"
      :position="position"
      :queryString="queryString"
      :mockList="groupUserData"
      @onPickUser="handlePickUser"
      @onHide="handleHide"
      @onShow="handleShow"
    ></atDialog>
    <!-- @成员弹窗-end -->
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { wxEmojis } from "@/utils/wxEmojis";
import sendChatMsg from "@/utils/sendChatMsg";
import { atDialog, wxEmojisDialog } from "./components/index";
export default {
  name: "sandBox",
  components: { atDialog, wxEmojisDialog },
  data() {
    return {
      wxEmojisDialogShow: false, //表情包选择弹窗状态
      node: "", // 获取到节点
      groupUser: "", // 选中项的内容
      endIndex: "", // 光标最后停留位置
      queryString: "", // 搜索值
      atDialogShow: false, // 是否显示弹窗
      position: {
        x: 0,
        y: 0,
      }, // 弹窗显示位置
      chatTextarea: "",
      //@成员数据
      groupUserData: [
        { nick_name: "HTML", user_id: "HTML" },
        { nick_name: "CSS", user_id: "CSS" },
        { nick_name: "Java", user_id: "Java" },
        { nick_name: "JavaScript", user_id: "JavaScript" },
      ],
      chatSendSuccess: "",
    };
  },
  computed: {
    ...mapGetters(["wxEmojisData"]),
  },
  watch: {
    queryString(val) {
      if (val) {
        //模糊查询
        this.mockList = this.groupUserData.filter(({ nick_name }) =>
          nick_name.includes(val)
        );
      } else {
        this.mockList = this.groupUserData.slice(0);
      }
      this.position = this.getRangeRect(this.mockList.length);
      console.log("watch-mockList", this.mockList);
    },
  },
  methods: {
    //关闭微信表情包弹窗
    closeWxEmojisDialogShow() {
      this.wxEmojisDialogShow = false;
    },

    //微信默认表情包回显
    wxEmojis(html) {
      return wxEmojis(html);
    },

    //点击表情包
    wxEmojisClick(item) {
      let wxEmojis = this.wxEmojis(item);
      console.log("wxEmojis", wxEmojis);
      this.$refs.chatTextarea.focus();
      this.insertHtmlAtCaret(wxEmojis);
    },

    //点击聊天框
    chatTextareaClick() {
      //this.$refs.chatTextarea.focus();
      // 获取选定对象
      var selection = getSelection();
      // 设置最后光标对象
      this.chatBlurIndex = selection.getRangeAt(0);
    },

    //发送消息
    chatSubmit() {
      this.chatTextarea = this.$refs.chatTextarea.innerHTML;
      let atNode = document.querySelectorAll(".chatTextarea span"); //获取所有的@成员节点
      let userArray = [];
      console.log("atNode", atNode);
      for (let i = 0; i < atNode.length; i++) {
        if (atNode[i].getAttribute("data-user")) {
          userArray.push(
            JSON.parse(atNode[i].getAttribute("data-user")).user_id
          );
        }
      }
      let wxEmojisNode = document.querySelectorAll(".chatTextarea i"); //获取所有的表情包节点
      //遍历表情包，将表情包节点替换成转义表情包字符：[微笑]
      for (let i = 0; i < wxEmojisNode.length; i++) {
        for (let j = 0; j < this.wxEmojisData.length; j++) {
          if (
            wxEmojisNode[i].getAttribute("data-value") ==
            this.wxEmojisData[j]
          ) {
            //将表情包节点替换成转义表情包字符：[微笑]
            this.chatTextarea = this.chatTextarea.replace(
              wxEmojisNode[i].outerHTML.toString(),
              this.wxEmojisData[j]
            );
          }
        }
      }
      console.log("userArray", userArray);
      console.log(
        "发送消息this.chatTextarea",
        this.trimHtml(this.chatTextarea)
      );
      this.chatSendSuccess = this.trimHtml(this.chatTextarea);
    },

    //从html代码中获取纯文本
    trimHtml(str) {
      return sendChatMsg.trimHtml(str);
    },

    // 获取光标位置
    getCursorIndex() {
      return sendChatMsg.getCursorIndex();
    },

    // 获取节点
    getRangeNode() {
      return sendChatMsg.getRangeNode();
    },

    // @成员弹窗出现的位置
    getRangeRect() {
      return sendChatMsg.getRangeRect();
    },

    // 是否展示 @
    showAt() {
      return sendChatMsg.showAt();
    },

    // 获取 @ 用户
    getAtUser() {
      return sendChatMsg.getAtUser();
    },

    //选择表情包后在聊天框内插入html
    insertHtmlAtCaret(html) {
      return sendChatMsg.insertHtmlAtCaret(html, this.chatBlurIndex);
    },

    // 插入@标签
    replaceAtUser(replaceHtml, that) {
      return sendChatMsg.replaceAtUser(replaceHtml, that);
    },

    // 键盘抬起事件
    handkeKeyUp() {
      if (this.showAt()) {
        const node = this.getRangeNode();
        const endIndex = this.getCursorIndex();
        this.node = node;
        this.endIndex = endIndex;
        this.position = this.getRangeRect();
        this.queryString = this.getAtUser() || "";
        this.atDialogShow = true;
      } else {
        this.atDialogShow = false;
      }
    },

    // 键盘按下事件
    handleKeyDown(e) {
      if (this.atDialogShow) {
        if (
          e.code === "ArrowUp" ||
          e.code === "ArrowDown" ||
          e.code === "Enter"
        ) {
          e.preventDefault();
        }
      }
    },

    // 插入标签后隐藏选择框
    handlePickUser(groupUser) {
      let that = this;
      this.replaceAtUser(groupUser, that);
      this.groupUser = groupUser;
      this.atDialogShow = false;
    },

    // 隐藏选择框
    handleHide() {
      this.atDialogShow = false;
    },

    // 显示选择框
    handleShow() {
      this.atDialogShow = true;
    },
  },
};
</script>

<style scoped lang="scss">
//chatTools-工具
div:focus {
  outline: none;
}
.chatToolsPane {
  margin: 400px 200px 0 200px;
  border: 1px solid #e6e6e6;
  width: 690px;
  height: 160px;
}
.chatTools {
  height: 148px;
  position: relative;
  .joinChat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    .joinChatBtn {
      width: 100%;
      text-align: center;
      margin-top: 15px;
    }
  }
  .svg-icon {
    width: 20px !important;
    height: 20px !important;
  }

  //聊天操作-start
  .chatOperation {
    padding: 10px 20px;
    .toolBtn {
      span {
        display: inline-block;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }
  //聊天框-发送消息-start
  .chatTextareaDiv {
    position: relative;
    height: 110px;
    ::v-deep .el-textarea__inner,
    .chatTextarea {
      height: 70px;
      padding: 5px 0;
      border: none;
      color: #333;
      resize: none;
      background: none;
      line-height: 22px;
      position: relative;
      overflow-y: auto;
      word-wrap: break-word;
      width: 651px;
    }
    .chatTextarea::-webkit-scrollbar {
      width: 6px;
    }
    .chatTextarea::-webkit-scrollbar-track {
      background-color: #fff;
      border-radius: 10px;
    }
    .chatTextarea::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      border-radius: 20px;
    }
    ::v-deep .el-textarea__inner::-webkit-scrollbar {
      width: 6px;
    }
    ::v-deep .el-textarea__inner::-webkit-scrollbar-track {
      background-color: #fff;
      border-radius: 10px;
    }
    ::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      border-radius: 20px;
    }
    .chatSubmitBtn {
      position: absolute;
      bottom: 5px;
      right: 0;
      ::v-deep .el-button--small {
        padding: 7px 30px;
      }
    }
  }
  //聊天框-发送消息-end

  .chatSendSuccess {
    margin-top: 30px;
  }
}
</style>

<style lang="scss">
.chatTextarea {
  //微信默认表情
  .wxEmojis {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("~@/assets/images/wxEmojis.png") top left
      no-repeat;
    // background-position: -3px -3px;
    vertical-align: bottom;
    margin: 0 1px;
  }
  i {
    font-style: normal;
  }
}
</style>
